/*
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-31 10:42:57
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-22 16:24:56
 */

import { FormSchema } from '/@/components/Form';
// import { h } from 'vue';
import { Avatar, Tag, TimePicker } from 'ant-design-vue';

// 自定义天数
export const dayTimes = [
  {
    name: '周一',
    week_day: 1,
  },
  {
    name: '周二',
    week_day: 2,
  },
  {
    name: '周三',
    week_day: 3,
  },
  {
    name: '周四',
    week_day: 4,
  },
  {
    name: '周五',
    week_day: 5,
  },
  {
    name: '周六',
    week_day: 6,
  },
  {
    name: '周天',
    week_day: 0,
  },
];

// 门店设置
export const formSchemas: FormSchema[] = [
  {
    field: 'store_name',
    component: 'Input',
    label: '商城名称',
    required: true,
    colProps: {
      span: 20,
    },
    rules: [{ required: true, message: '请输入商城名称' }],
    componentProps: {
      placeholder: '请输入商城名称',
    },
  },
  {
    field: 'describe',
    component: 'InputTextArea',
    label: '商城简介',
    required: true,
    colProps: {
      span: 20,
    },
    rules: [{ required: true, message: '请输入商城简介' }],
    componentProps: {
      placeholder: '请输入商城简介',
    },
  },
  {
    field: 'logo_image',
    label: '商城Logo',
    component: 'Input',
    colProps: { span: 24, offset: 0 },
    render: ({ model, field }) => {
      return <Avatar src={model[field]?.preview_url} size="large" />;
    },
  },
  {
    field: 'phone',
    component: 'Input',
    label: '门店电话',
    required: true,
    colProps: {
      span: 20,
    },
    rules: [{ required: true, message: '请输入门店电话' }],
    componentProps: {
      placeholder: '请输入门店电话',
    },
  },
  {
    field: 'status',
    component: 'Switch',
    label: '运营状态',
    required: true,
    colProps: {
      span: 20,
    },
    componentProps: (formModel) => {
      checked: formModel['status'];
    },
    helpMessage: '营业状态关闭时，该门店处于休息状态，用户端门店列表不会展示门店',
  },
  {
    field: 'is_pickup',
    component: 'Switch',
    label: '是否启用自提',
    required: true,
    colProps: {
      span: 20,
    },
    componentProps: {
      checked: true,
    },
    helpMessage: '当启用自提，该门店支持到店自提的配送方式',
  },
  {
    field: 'o2o_platform',
    component: 'Input',
    label: '配送管理',
    required: true,
    colProps: {
      span: 20,
    },
    ifShow: ({ values }) => {
      return !!values.o2o_platform;
    },
    render: ({ model, field }) => {
      return (
        <>
          {model[field].map((delivery) => {
            const tagColor = delivery.platform_shop_id ? 'green' : 'red';
            return <Tag color={tagColor}>{delivery.name}</Tag>;
          })}
        </>
      );
    },
  },
  {
    field: 'doorplate',
    component: 'Input',
    label: '门牌号',
    required: true,
    colProps: {
      span: 20,
    },
    rules: [{ required: true, message: '请输入门牌号' }],
    componentProps: {
      placeholder: '请输入门牌号',
    },
  },
  {
    field: 'timeWeekArr',
    component: 'CheckboxGroup',
    label: '运营时间',
    required: true,
    colProps: {
      span: 20,
    },
    rules: [{ required: true, message: '请输入运营时间' }],
    componentProps: ({ formModel }) => {
      return {
        options: dayTimes.map((v) => {
          return {
            label: v.name,
            value: v.week_day,
          };
        }),
        value: formModel.timeWeekArr,
      };
    },
  },
  {
    field: 'detail',
    label: '',
    component: 'Input',
    ifShow: true,
    labelWidth: 70,
    colProps: { span: 0, offset: 0 },
    slot: 'detail',
  },
  {
    field: 'jd',
    label: '',
    component: 'Input',
    ifShow: true,
    labelWidth: 70,
    colProps: { span: 0, offset: 0 },
    slot: 'jd',
  },
  {
    field: 'wd',
    label: '',
    component: 'Input',
    ifShow: true,
    labelWidth: 70,
    colProps: { span: 0, offset: 0 },
    slot: 'wd',
  },
  {
    field: 'endTime',
    label: '',
    component: 'Input',
    ifShow: true,
    labelWidth: 70,
    colProps: { span: 0, offset: 0 },
    slot: 'endTime',
  },
  {
    field: 'startTime',
    label: '',
    component: 'Input',
    labelWidth: 0,
    colProps: { span: 12, offset: 2 },
    render: ({ model, field }) => {
      return (
        <>
          <TimePicker
            placeholder="上班时间"
            value={model[field]}
            onChange={(time, _) => {
              model[field] = time;
            }}
          />
          <TimePicker
            placeholder="下班时间"
            style={{ marginLeft: '10px' }}
            value={model['endTime']}
            onChange={(time, _) => {
              model['endTime'] = time;
            }}
          />
        </>
      );
    },
  },
  {
    field: 'address',
    component: 'Input',
    label: '营业地址：',
    colProps: {
      span: 20,
    },
    defaultValue: 1,
    slot: 'address',
    required: true,
  },
];
